<template>
	<view class="report-submit">
		<view style="height: 40rpx;"></view>
		<view class="report-dec item">
			<view class="title">举报描述</view>
			<uv-textarea v-model="data.description" placeholder="请描述作品中存在的问题" count maxlength="200"></uv-textarea>
		</view>
		
		<view class="report-up item">
			<view class="title">图片材料提交</view>
			<uv-upload
					:fileList="fileList"
					multiple 
					:maxCount="4"
					@afterRead="afterRead" 
					@delete="deletePic" 
				></uv-upload>
		</view>
		<view class="submit">
			<uv-button color="#f35344" type="error" text="提交" @click="submit"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import api from './api';
	const data = ref({
		reportTypeId:'',
		photographId:'',
		description:'',
		files:''
	})
	onMounted(() => {
		let pages = getCurrentPages(); // 获取当前打开过的页面路由数组
		console.log(pages[pages.length - 1].options)
		data.value.photographId = pages[pages.length - 1].options.id
		data.value.reportTypeId = pages[pages.length - 1].options.type
	})
	const fileList = ref([])
	
	const submit = ()=>{
		data.value.files = ''
		fileList.value.forEach(file=>{
			data.value = data.value + file.id + ','
		})
		api.addPhotoReport(data.value).then(res=>{
			if(res.successed){
				uni.navigateTo({
					url:'/pages/report/reportSuccess'
				})
			}
		})
	}
	
	const afterRead = async (e) => {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(e.file)
		let fileListLen = fileList.value.length
		lists.forEach((item) => {
			fileList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
	
		for (let i = 0; i < lists.length; i++) {
			const result = await api.upload(lists[i].url)
			let item = fileList.value[fileListLen]
			fileList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				id: result.data.id
			}))
			fileListLen++
		}
	}
	const deletePic = (e) => {
		fileList.value.splice(e.index, 1)
	}

	
</script>

<style lang="scss">
	.report-submit{
		height: 100vh;
		background-color: #f3f3f3;
		.item{
			    width: 90%;
			    border-top: 20rpx;
			    padding: 20rpx;
			    margin: auto;
			    margin-bottom: 20rpx;
			    background-color: white;
			    border-radius: 10px;
				.title{
					    height: 60rpx;
					    font-size: 28rpx;
				}
		}
		.submit{
			width: 90%;
			position: absolute;
			bottom: 60rpx;
			left: 5%;
		}
	}
</style>